<template>
  <div class="flex row items-center justify-between q-mt-sm" :id="infoId" :style="{ height: '280px' }">
    <crane-info :crane-data="craneData" :dark="dark" :operateMode="operateMode" :orderSift="orderSift" />
    <!-- <crane-direction :crane-data="craneData" /> -->
    <crane-detail :info="''" :currentPosition="currentPosition" />
  </div>
</template>

<script lang="ts">
import { PropType, defineComponent } from 'vue';

import CraneInfo from './crane-info.vue';
import CraneDirection from './crane-direction.vue';
import CraneDetail from './crane-detail.vue';
import { infoId } from '../setup';
import { CraneProps } from '../main/models';

export default defineComponent({
  name: 'terminal-info',

  components: {
    CraneInfo,
    // CraneDirection,
    CraneDetail,
  },

  props: {
    // craneId: {
    //   type: String,
    //   required: true,
    // },
    dark: {
      type: Boolean,
      required: true,
    },
    craneData: {
      type: Object as PropType<CraneProps>,
      required: true,
    },
    currentPosition: {
      type: Object as PropType<any>,
      required: true,
    },
    operateMode: {
      type: String,
      required: true,
    },
    orderSift: {
      type: Object as PropType<any[]>,
      required: true,
    },
  },

  setup() {
    return {
      infoId,
    };
  },
});
</script>
